<% 
  var headContent = {
%>
<!-- //这里包含需要引入的其他css/js文件 -->
<style>
 /*验证：提示信息样式 begin*/
 .am-alert-danger {
    background-color: transparent;
    border-color: transparent;
    color: red;
  }
  .am-alert {
    margin-bottom: 1em;
    padding: .625em;
    background: transparent;
    border: none;
    border-radius: 0;
  }
  /*验证：提示信息样式 end*/
</style>
<%};%>
<%layout("/common/_layout.html",{head:headContent}){%>
<form method="post" class="am-form" id="tmpForm" action="${base}/role/save">
	<!--选项卡（tabs）begin-->
	<div class="am-tabs am-margin" data-am-tabs>
		<ul class="am-tabs-nav am-nav am-nav-tabs">
			<li class="am-active">
				<a href="#tab1">编辑角色信息</a>
			</li>
		</ul>
		<div class="am-tabs-bd">
			<div class="am-tab-panel am-fade am-in am-active" id="tab1">
				<input name="roleID" id="roleID" type="hidden" value="${roleID!}"/>
				<!--验证表单元素（validate) begin-->
				<!--input begin-->
				<div class="am-g am-form-group am-margin-top">
					<div class="am-u-sm-4 am-u-md-2 am-text-right">
						<span  style="color: red;">*</span>
						角色名称
					</div>
					<div class="am-u-sm-6 am-u-md-6">
						<input name="roleName" class="js-ajax-validate"
								data-validate-async data-validation-message="请输入角色名称（100字符以内）"
								type="text" id="roleName" value="${roleName!}" minlength="1" maxlength="100"
								placeholder="请输入角色名称（100字符以内）" required onblur="checkRoleName($(this));" onKeyUp="clearValidInfo()" />
					</div>
					<div class="am-u-sm-2 am-u-md-4 input-msg" id="role_name_valid"></div>
				</div>

				<!--select-single begin-->
				<div class="am-g am-form-group am-margin-top">
					<div class="am-u-sm-4 am-u-md-2 am-text-right">
						<span  style="color: red;">*</span>
						角色等级
					</div>
					<div class="am-u-sm-6 am-u-md-6">
						<select data-am-selected name="roleLevel">
							<%for(levelNode in level){%>
							<option value="${levelNode.value}" <%if(levelNode.selected){%>
								selected
								<%}%>>${levelNode.name}</option>
							<%}%></select>
					</div>
					<div class="am-u-sm-2 am-u-md-4 input-msg"></div>
				</div>
				<!--select-single end-->
				<!--select-single begin-->
				<div class="am-g am-form-group am-margin-top">
					<div class="am-u-sm-4 am-u-md-2 am-text-right">
						<span  style="color: red;">*</span>
						角色类型
					</div>
					<div class="am-u-sm-6 am-u-md-6">
						<select data-am-selected name="roleType">
							<%for(typeNode in type){%>
							<option value="${typeNode.value}" <%if(typeNode.selected){%>
								selected
								<%}%>>${typeNode.name}</option>
							<%}%></select>
					</div>
					<div class="am-u-sm-2 am-u-md-4 input-msg"></div>
				</div>
				<!--select-single end-->

				<!--radio begin-->
				<div class="am-g am-form-group am-margin-top">
					<div class="am-u-sm-4 am-u-md-2 am-text-right">
						<span  style="color: red;">*</span>
						是否启用
					</div>
					<div class="am-u-sm-6 am-u-md-6">
						<label class="am-radio-inline">
							<input type="radio"
								name="radioActive" value="true" data-am-ucheck
								<%if(isActive){%>
							checked
							<%}%>>是</label>
						<label class="am-radio-inline">
							<input type="radio"
								name="radioActive" value="false" <%if(!isActive){%>
							checked
							<%}%>data-am-ucheck>否</label>
					</div>
					<div class="am-u-sm-2 am-u-md-4 input-msg"></div>
				</div>
				<!--radio end-->
				<div class="am-g am-form-group am-margin-top">
					<div class="am-u-sm-4 am-u-md-2 am-text-right">管理权限</div>
					<div class="am-u-sm-8 am-u-md-10">
						<table
								class="am-table am-table-striped am-table-hover am-table-bordered">
							<thead>
								<tr>
									<th width="30%">导航名称</th>
									<th>权限分配</th>
									<th width="10%">全选</th>
								</tr>
							</thead>
							<tbody>
								<%printNode(permnode,"",0);%></tbody>
						</table>
					</div>
					<!-- <div class="am-u-sm-2 am-u-md-4">&nbsp;</div>
				-->
			</div>
			<!--验证表单元素（validate end-->
		</div>
	</div>
</div>
<!--选项卡（tabs）end-->
<div class="am-margin">
	<%if(selectedType>0){%>
	<button type="submit" class="am-btn am-btn-primary am-btn-xs">提交保存</button>
	<%}%>
	<button type="button" class="am-btn am-btn-warning am-btn-xs" onclick="javascript:history.go(-1);">返回上一级</button>
</div>
</form>
<script type="text/javascript" src="${base}/template/admin/js/role.js"></script>
<script type="text/javascript">
	    var urlBase = "${base}";
	    var url;

	    function checkRoleName(obj){    
	      	var roleName = obj.val();
	      	var roleID = $("#roleID").val();

	      	if(roleName.length == 0){	      		
	      		showRoleNameAlert($("#roleName").date("data-validation-message"));
	      		return;
	      	}   
	      	$.ajax({
		        	url : urlBase + "/role/check",
		            type : 'POST',
		            dataType : 'json',
		            data : {
		                role_id : roleID, role_name : roleName
		            },
	                cache : false
	        	}).done(function (result) {
	          		if (result) {          			
	            		if(result.duplicate){
	            			showRoleNameAlert("该角色名已存在,请重新输入！");	            			
	            			obj.focus();              			
	            	}else{
	            		$("#role_name_valid").text("");
	            	}
	    		}
	       		}).fail(function () {          		
	        });        

	    }
	    function showDialog(msgTitle, message, msgType, msgTimer){
	      sendMessage({
	              title : msgTitle,
	              text : message,
	              type : msgType,
	              timer : msgTimer,
	              confirmButtonText : false
	        });          
	    }
	    function clearValidInfo(){
	    	showRoleNameAlert("");  
	    }
	    function showRoleNameAlert(message){
	    	var $alert = $("#role_name_valid").find('.am-alert');	    	
			if (!$alert.length) {
				$alert = $('<div class="am-alert am-alert-danger"></div>').hide()
				$alert.appendTo($("#role_name_valid"));
			}
			if(message.length==0){
	    		$alert.hide();	
	    	}else{
				$alert.text(message).show();
			}
	    }
  	</script>
<%}%>